<template>
	<view class="article-images_item" :data-imgjson="imgjson" :data-index="index"
	:style="getStyle(index)">
		<u-image v-if="JSON.parse(JSON.stringify(imgList)).length == 1" :width="item.width> item.height ? 400: 'auto'" :src="item.Src"
			:mode="item.width> item.height ? 'widthFix': 'heightFix'" :height="item.width > item.height ? 'auto' : 400"></u-image>
		<u-image
			v-if="JSON.parse(JSON.stringify(imgList)).length == 2 || JSON.parse(JSON.stringify(imgList)).length == 4"
			:width="style.width1" :height="style.height1" :src="item.Src" mode="aspectFill"
			></u-image>
		<u-image
			v-if="JSON.parse(JSON.stringify(imgList)).length > 2 && JSON.parse(JSON.stringify(imgList)).length != 4"
			:width="style.width2" :height="style.height2" :src="item.Src" mode="aspectFill"></u-image>
	</view>
	<!-- <previewImage ref="previewImage" :opacity="1" :circular="true" :imgs="imgList" @closePreview="closePreview"></previewImage> -->
</template>

<script>
	import { getImageCache } from "@/utils/images.js";
	import { defineComponent, reactive,toRefs, onMounted, nextTick} from 'vue'
	// import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'; //引用插件
	export default defineComponent({
		props: {
			item: {
				type: Object,
				default: null
			},
			index: {
				type: Number,
				default: null
			},
			imgjson: {
				type: Array,
				default: null
			},
			bigImgJson: {
				type: Array,
				default: null
			},
			//图片地址后缀
			suffix: {
				type: String,
				default: '',
			},
			style: {
				type: Object,
				default: null
			}
		},
		components: {
			// previewImage
		},
		setup(props) {
			const data = reactive({
				imgList: [],
				isShowImg: false,
				showPreviewRef: false,
			})
			onMounted(()=> {
				console.log('asass')
				nextTick(() => {
					// console.log("this.imgjson", this.imgjson)
					props.imgjson.forEach(item => {
						uni.getImageInfo({
							src: item.Src,
							success: (image) => {
								console.log(image)
							  data.imgList.push({
							  	type: 'image',
							  	url: item.Src,
									width: image.width,
									height: image.height
							  })
							}
						})
						
					})
				})
			});
			const previewOpen = (e)=> {
				var param = e
				uni.hideTabBar()
				this.$refs.previewImage.open(param); // 传入当前选中的图片地址或序号
			};
			const closePreview = () => {
				uni.showTabBar()
			};
			//根据图片数量判断是否有margin-left
			const getStyle = (index) => {
				if(data.imgList.length === 2 || data.imgList.length === 4) {
					if(index % 2 === 0) {
						return { 'margin-left': 0}
					}
				}
				else if(data.imgList.length > 2 && data.imgList.length != 4) {
					if(index % 3 === 0) {
						return { 'margin-left': 0}
					}
				}
			};
			return {
				...toRefs(data),
				previewOpen,
				closePreview,
				getStyle
			}
		},
	})
		
</script>

<style lang="scss" scoped>
	.article-images {
		clear: both;
		overflow: hidden;
		padding-bottom: 10rpx;

		&_item {
			margin-left: 8rpx;
			margin-top: 8rpx;
		}
	}
</style>